<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>基本网格布局</title>
  </head>
  <style>
    .Grid {
      display: flex;
    }
    .Grid-cell {
      /* width: 100px;
      height: 30px; */
      background-color: pink;
      margin-right: 30px;
      /* flex 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况 则 flex 的默认值是 0 1 auto*/
      flex: 1; /* 自动分配空间 */
      /* flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 */
      /* flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 24em; */
    }

    /* .Grid-cell.center {
      flex: 1;
    } */
  </style>
  <body>
    <div class="Grid">
      <div class="Grid-cell">1...</div>
      <div class="Grid-cell center">2...</div>
      <div class="Grid-cell">3...</div>
    </div>
  </body>
</html>
